<template>
  <div class="language_type_wrapper">
    <div class="title">语言设置</div>
    <div class="language">
      <span>语言类型</span>
      <select v-model="languageType">
        <option :value="item.ename" v-for="(item, ind) in languageArr" :key="ind">
          {{item.cname}}</option>
      </select>
    </div>
  </div>
</template>

<script>
let languageArr = [{
  cname: '中翻英',
  ename: 'CN-EN'
},{
  cname: '英翻中',
  ename: 'EN-CN'
},{
  cname: '中翻藏',
  ename: 'CN-TIBETIC'
},{
  cname: '藏翻中',
  ename: 'TIBETIC-CN'
},{
  cname: '中翻维',
  ename: 'CN-UIGHUR'
},{
  cname: '维翻中',
  ename: 'UIGHUR-CN'
},{
  cname: '中翻俄',
  ename: 'CN-RUSSIAN'
},{
  cname: '俄翻中',
  ename: 'RUSSIAN-CN'
},{
  cname: '中翻日',
  ename: 'CN-JAPAN'
},{
  cname: '日翻中',
  ename: 'JAPAN-CN'
},{
  cname: '中翻法',
  ename: 'CN-FRENCH'
},{
  cname: '法翻中',
  ename: 'FRENCH-CN'
},{
  cname: '中翻西',
  ename: 'CN-SPAIN'
},{
  cname: '西翻中',
  ename: 'SPAIN-CN'
},{
  cname: '中翻阿',
  ename: 'CN-ARABIC'
},{
  cname: '阿翻中',
  ename: 'ARABIC-CN'
},{
  cname: '中翻韩',
  ename: 'CN-KOREAN'
},{
  cname: '韩翻中',
  ename: 'KOREAN-CN'
},{
  cname: '中翻德',
  ename: 'CN-GERMAN'
},{
  cname: '德翻中',
  ename: 'GERMAN-CN'
},{
  cname: '中翻越',
  ename: 'CN-VIETNAMESE'
},{
  cname: '越翻中',
  ename: 'VIETNAMESE-CN'
},{
  cname: '中翻泰',
  ename: 'CN-THAI'
},{
  cname: '泰翻中',
  ename: 'THAI-CN'
},{
  cname: '中翻葡萄牙',
  ename: 'CN-PORTUGUESE'
},{
  cname: '葡萄牙翻中',
  ename: 'PORTUGUESE-CN'
},{
  cname: '中翻意大利',
  ename: 'CN-ITALIAN'
},{
  cname: '意大利翻中',
  ename: 'ITALIAN-CN'
},{
  cname: '中翻粤',
  ename: 'CN-CANTONESE'
},{
  cname: '粤翻中',
  ename: 'CANTONESE-CN'
}];
export default {
  name: 'LanguageType',
  props: {
    comInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      languageType: "CN-EN",
      languageArr: languageArr
    }
  },
  created() {

  },
  watch: {
    comInfo: {
      handler(val) {
        if (!val) return;
        Object.keys(val).forEach(key => {
          if (this.hasOwnProperty(key)) {
            this[key] = val[key]
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    getComponentVal() {
      return {
        languageType: this.languageType
      }
    }
  }
}
</script>

<style lang="less" scoped>
.language_type_wrapper {
  .language {
    padding-left: 20px;
    select {
      color: #333;
      margin-left: 20px;
      padding-left: 5px;
      width: 100px;
      height: 34px;
      border-radius: 3px;
      border: 1px solid #e0e0e0;
    }
    option {
      padding-left: 5px;
    }
    span {
      line-height: 34px;
      color: #666;
    }
  }
}
</style>
